<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 520px;
            height: 333px;
            background-color: #99ff99;
            margin: 10px auto;
            padding: 10px 0;
            position: relative;    /*开启定位把父元素固定住 相对定位*/
            overflow: hidden;/*溢出的部分隐藏*/
        }
        #imglist{
           /*width: 2600px;//520*5=2600用js表现出来 是变动的*/
            position: absolute;/* 开启定位 相对于父元素的绝对定位  */
            left: 0px;/*设置偏移量*/

        }
        #imglist li{
            list-style: none;
            margin: 0 10px;
            float: left;
        }
        #navDiv{
            position: absolute;/*开启定位*/
            bottom: 25px;/*设置位置*/
            /*box1宽度520 navDiv的宽度是（15+10）*5=125   left=(520-125)/2=197.5*/
        /*    left:197px ;!*用js设置一下 不能写死*!*/
        }
        #navDiv a{
            float: left;/*因为a是行元素，用float变成块元素 才具有宽和高才生效*/
            background-color: red;
            width: 15px;
            height: 15px;
            margin: 0 5px;
            opacity: 0.5; /*设置透明*/
            filter: alpha(opacity=50);/*兼容IE8的透明度*/
        }
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <script src="../tools.js"></script>
    <script>
        window.onload=function () {
            var imglist=document.getElementById("imglist");
            var liArr=document.getElementsByTagName("li");
                imglist.style.width=520*liArr.length+"px";
                //设置navDiv的left的值
            var box1=document.getElementById("box1");
            var navDiv=document.getElementById("navDiv");
            navDiv.style.left=(box1.offsetWidth-navDiv.offsetWidth)/2+"px";
            //设置鼠标的默认行为
            var index=0;
            var allA=document.getElementsByTagName("a");
            allA[index].style.backgroundColor="black";//a默认颜色为黑色
            //点击超链接切换到指定图片
            for (var i=0;i<allA.length;i++){
                allA[i].num=i;//w为每一个超链接都添加一恶搞num属性
                allA[i].onclick=function () {
                    index=this.num;//获取超链接的索引 并将其设置为Index
                    //  切换图片 第一张图 索引0 left0
                    //          第二张图 索引1 left -520
                    //          第三张图 索引2 left -1040
                    //         第四张图 索引3 left -1560
                        // imglist.style.left=-520*index+"px";//设置选中的a
                    setA();
                    //使用move函数来切换图片
                    move(imglist,"left",-520*index,20,function () {

                    });
                }
            }
            function setA() {//创建一个方法用来设置选中的A
                for (var i=0;i<allA.length;i++){ //遍历所有的a
                    allA[i].style.backgroundColor="";//这个是写在元素里的样式 优先级高 如果写红色 那么css中的背景颜色就失效了
                    // 写成空串 表示让css中的红色生效了
                }
                allA[index].style.backgroundColor="black";
            }
        };

    </script>
</head>
<body>
<div id="box1">
    <ul id="imglist">
        <li><img src="../imagconman/1.jpg" alt=""></li>
        <li><img src="../imagconman/2.jpg" alt=""></li>
        <li><img src="../imagconman/3.jpg" alt=""></li>
        <li><img src="../imagconman/4.jpg" alt=""></li>
        <li><img src="../imagconman/5.jpg" alt=""></li>
    </ul>
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>

    </div>
</div>
</body>
</html>